<template>
	<div style="height: 100%">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<component-style  v-if="!isDialog" :curComponent="curComponent"></component-style>
				<a-form layout="vertical">
					<a-collapse :bordered="false">
						<template #expandIcon="props">
                            <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
						</template>
						<a-collapse-panel key="1" :header="mapI18n('mapLocale','地图区域设置')"  v-if="!isDialog">
							<a-select v-model:value="config.styles.mapType" style="width:100%;margin-top: 10px;margin-bottom: 10px;">
								<a-select-option value="china">{{mapI18n('administrativeMap','全国行政地图')}}</a-select-option>
								<a-select-option value="province">{{mapI18n('provinceLevel','省份级别')}}</a-select-option>
								<a-select-option value="custom">{{mapI18n('customize','自定义')}}</a-select-option>
							</a-select>
							<a-form-item :label="mapI18n('province','省份')" v-if="config.styles.mapType=='province'">
								<a-select v-model:value="config.styles.province" :options="mapTypes" ></a-select>
							</a-form-item>
                            <a-form-item v-if="config.styles.mapType=='custom'">
                                <template #label>
                                    {{mapI18n('customize','自定义')}}
                                    <a-tooltip>
                                        <template #title>
                                            <span style="width:500px;">
                                                {{mapI18n("msa.tooltipTip","提示")}}
                                            </span>
                                        </template>
                                        <QuestionCircleOutlined />
                                    </a-tooltip>
                                </template>
                                <a-input style="width: 100%" v-model:value="config.styles.province"/>
							</a-form-item>
							<a-row>
								<a-col :span="12">
									<a-form-item :label="mapI18n('areaColor','区域颜色')" style="width:175px">
										<a-input style="width: 80%" v-model:value="config.styles.areaConfig.areaColor" type="color" :placeholder="mapI18n('areaColor','区域颜色')"/>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item :label="mapI18n('focusSelected','聚焦选中区域')" style="width:175px">
										<a-switch  size="small" v-model:checked="config.styles.areaConfig.focus"/>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row v-if="config.styles.areaConfig.focus">
								<a-col :span="12">
									<a-form-item :label="mapI18n('highlightSelected','选中区域高亮颜色')" style="width:175px">
										<a-input style="width: 80%" v-model:value="config.styles.areaConfig.focusColor" type="color" :placeholder="mapI18n('highlightSelected','选中区域高亮颜色')"/>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item :label="mapI18n('selectColor','选中区域文字颜色')" style="width:175px">
										<a-input style="width: 80%" v-model:value="config.styles.areaConfig.fontColor" type="color" :placeholder="mapI18n('selectColor','选中区域文字颜色')"/>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row>
								<a-col :span="24">
									<a-form-item :label="mapI18n('contourStyle','轮廓样式')" style="width:90%">
										<div style="display: flex">
											<a-select v-model:value="config.styles.areaConfig.borderType" style="width: 100px;">
												<a-select-option value="solid">{{mapI18n('solidLine','实线')}}</a-select-option>
												<a-select-option value="dashed">{{mapI18n('dottedLine','虚线')}}</a-select-option>
												<a-select-option value="dotted">{{mapI18n('point','点')}}</a-select-option>
											</a-select>
											<a-input-number style="width: 100px;margin-left: 5px" v-model:value="config.styles.areaConfig.borderWidth"></a-input-number>
											<a-input  style="width: 100px;margin-left: 5px" v-model:value="config.styles.areaConfig.borderColor" type="color" :placeholder="mapI18n('contourColor','轮廓颜色')"/>
										</div>
									</a-form-item>
								</a-col>
							</a-row>
						</a-collapse-panel>
						<a-collapse-panel key="2" :header="mapI18n('label','标签')">
                            <template #extra>
                                <span @click.stop="">
                                 <a-switch size="small" v-model:checked="config.styles.showLabel"/>
                                </span>
                            </template>
							<div v-if="config.styles.showLabel">
								<a-row>
									<a-col :span="12">
										<a-form-item :label="i18n('componentStyle.fontSize','字体大小')">
											<a-input-number class="laWidth" :placeholder="i18n('componentStyle.fontSize','字体大小')" v-model:value="config.styles.labelConfig.fontSize"></a-input-number>
										</a-form-item>
									</a-col>
									<a-col :span="12">
										<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
											<a-input style="width: 80%" v-model:value="config.styles.labelConfig.fontColor"  type="color"/>
										</a-form-item>
									</a-col>
								</a-row>
							</div>
						</a-collapse-panel>
						<a-collapse-panel key="3" :header="mapI18n('mappingComponent','视图映射组件') +'  VisualMap'">
                            <template #extra>
                                <span @click.stop="">
                                  <a-switch size="small" v-model:checked="config.styles.showVisual"/>
                                </span>
                            </template>
							<div>
								<a-row>
									<a-col :span="12">
										<a-form-item :label="mapI18n('position','位置')" style="width:175px">
											<a-select style="width:175px" v-model:value="config.styles.visualMap.position">
												<a-select-option value="left">{{mapI18n('leftSide','左侧')}}</a-select-option>
												<a-select-option value="right">{{mapI18n('rightSide','右侧')}}</a-select-option>
											</a-select>
										</a-form-item>
									</a-col>
									<a-col :span="12" v-if="config.styles.visualMap.type=='continuous'">
										<a-form-item :label="mapI18n('showHandle','显示拖拽手柄')" style="width:175px">
											<a-switch  size="small" v-model:checked="config.styles.visualMap.calculable"></a-switch>
										</a-form-item>
									</a-col>
								</a-row>
								<a-row>
									<a-col :span="12">
										<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')" style="width:175px">
											<a-input class="laWidth" v-model:value="config.styles.visualMap.textColor"  type="color"/>
										</a-form-item>
									</a-col>
									<a-col :span="12">
										<a-form-item :label="i18n('componentStyle.fontSize','字体大小')" style="width:175px">
											<a-input-number v-model:value="config.styles.visualMap.fontSize"></a-input-number>
										</a-form-item>
									</a-col>
								</a-row>
								<a-row>
									<a-form-item :label="mapI18n('colorMapping','颜色映射方式')">
										<a-radio-group v-model:value="config.styles.visualMap.type" @change="visualTypeChange">
											<a-radio value="continuous">{{mapI18n('continuous','连续型')}}</a-radio>
											<a-radio value="piecewise">{{mapI18n('segmented','分段型')}}</a-radio>
										</a-radio-group>
									</a-form-item>
								</a-row>
								<a-row v-if="config.styles.visualMap.type=='continuous'">
                                    <a-form-item :label="mapI18n('twoColors','依次映射数值从小到大的颜色，至少两个颜色')">
                                        <div class="map-continuous" v-for="(color_,index) in config.styles.visualMap.colors" :key="index">
                                            <MinusCircleOutlined class="map-continuous-icon" v-if="index>1" @click="deleteColor(index)"/>
                                            <div :style="{'margin-left':index<=1?'38px':''}">
                                                <a-input style="width: 217px" v-model:value="config.styles.visualMap.colors[index]"  type="color"/>
                                            </div>
                                        </div>
                                        <div class="addColor" @click="addColor"><PlusCircleOutlined class="addColor-icon"  /><div>{{mapI18n('newColor','新增颜色')}}</div></div>
                                    </a-form-item>
								</a-row>
								<a-row v-if="config.styles.visualMap.type=='piecewise'">
									<div>{{mapI18n('infinite','不指定最大值，表示为无限大')}}</div>
									<visualMapPiecewise :colors="config.styles.visualMap.colors"></visualMapPiecewise>
								</a-row>
								<a-row v-if="config.styles.visualMap.type=='continuous'">
									<a-col :span="12">
										<a-form-item :label="mapI18n('min','最小值')" style="width:175px">
											<a-input-number v-model:value="config.styles.visualMap.min"></a-input-number>
										</a-form-item>
									</a-col>
									<a-col :span="12">
										<a-form-item :label="mapI18n('minText','最小值文本')" style="width:175px">
											<a-input v-model:value="config.styles.visualMap.minText"></a-input>
										</a-form-item>
									</a-col>
								</a-row>
								<a-row v-if="config.styles.visualMap.type=='continuous'">
									<a-col :span="12">
										<a-form-item :label="mapI18n('max','最大值')" style="width:175px">
											<a-input-number v-model:value="config.styles.visualMap.max"></a-input-number>
										</a-form-item>
									</a-col>
									<a-col :span="12">
										<a-form-item :label="mapI18n('maxText','最大值文本')" style="width:175px">
											<a-input v-model:value="config.styles.visualMap.maxText"></a-input>
										</a-form-item>
									</a-col>
								</a-row>
							</div>
						</a-collapse-panel>
						<a-collapse-panel key="4" :header="mapI18n('shadow','阴影')">
                            <template #extra>
                                <span @click.stop="">
                                    <a-switch size="small" v-model:checked="config.styles.showShadow"/>
                                </span>
                            </template>
							<div v-if="config.styles.showShadow">
								<a-row>
									<a-col :span="8">
										<a-form-item :label="mapI18n('shadowColor','阴影颜色')">
											<a-input style="width: 80%;" v-model:value="config.styles.shadowConfig.shadowColor"  type="color"/>
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item :label="mapI18n('shadowOffsetX','阴影X偏移')">
											<a-input-number  v-model:value="config.styles.shadowConfig.shadowOffsetX"/>
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item :label="mapI18n('shadowOffsetY','阴影Y偏移')">
											<a-input-number  v-model:value="config.styles.shadowConfig.shadowOffsetY"/>
										</a-form-item>
									</a-col>
								</a-row>
							</div>
						</a-collapse-panel>
					</a-collapse>
                    <!--tooltip提示框组件-->
                    <tooltip-config class="chart-tooltip"></tooltip-config>
                    <div class="chart-enlarge">
                        <span>{{mapI18n('screen','是否全屏')}}</span>
                        <a-switch v-model:checked="config.styles.fullScreenShow" size="small" />
                    </div>
				</a-form>
			</a-tab-pane>
			<a-tab-pane key="dataSources" :tab="i18n('componentStyle.data','数据')">
                <div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
                    <a-form-item :label="commonI18n('dataSource','数据来源')">
                        <a-radio-group v-model:value="config.dataSources.source" default-value="dynamic">
                            <a-radio value="dynamic">{{ commonI18n('dynamicData', '动态数据') }}</a-radio>
                            <a-radio value="static">{{ commonI18n('staticData', '静态数据') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <div v-if="config.dataSources.source=='static'" style="margin:10px 0px 0px 10px">
                        <a-button @click="setStaticData" style="margin-right: 5px;">{{ commonI18n('config', '配置') }}
                        </a-button>
                        <a-tag color="green" v-if="config.dataSources.staticData">
                            {{ commonI18n('configured', '已配置') }}
                        </a-tag>
                        <a-tag color="red" v-else>{{ commonI18n('notConfigured', '未配置') }}</a-tag>
                    </div>
                    <div v-else class="dataSources-common">
                        <!--配置项-->
                        <div class="dataSources-common-left">
                            <map-config :config="config" :isDialog="isDialog"></map-config>
                        </div>
                        <div class="dataSources-common-right">
                            <!--数据模型-->
                            <data-model
                                :dataModel="dataModel"
                                :config="config"
                                :modelConfig="modelConfig"
                                :getDataModel="getDataModel"
                                :dimensionStart="dimensionStart"
                                :dimensionEnd="dimensionEnd"
                                :measureStart="measureStart"
                                :measureEnd="measureEnd"
                            ></data-model>
                        </div>
                    </div>
                </div>
			</a-tab-pane>
			<a-tab-pane key="advancedConf" :tab="i18n('componentStyle.advanced','高级')"
                        v-if="config.dataSources.source!='static'">
				<a-form layout="vertical">
					<a-form style="margin-top: 10px;width: 100%" layout="vertical">
						<ChartAdvConfig v-if="!isDialog" :screenConfig="screenConfig"  :params="publishParams"></ChartAdvConfig>
						<!--刷新配置-->
						<refresh-config></refresh-config>
					</a-form>
				</a-form>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/**
 * 地图
 */
import TooltipConfig from "./common/tooltip-config.vue";
import MapTypes from "@/views/modules/preview/components/common/map-types.js"
import MapConfig from "./common/map-config.vue"
import chartDef from "./common/chart-def.js";
import DataModel from "./common/data-model.vue";
import VisualMapPiecewise from "./common/visual-map-piecewise.vue";
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue";
import ChartAdvConfig from "@/views/modules/design/right-component/common/chart-adv-config.vue";

export default {
	name: "mapDef",
	mixins:[MapTypes,chartDef],
	components:{
        TooltipConfig,
        MapConfig,
		DataModel,
        VisualMapPiecewise,
        RefreshConfig,
		ChartAdvConfig
	},
	props:["isDialog"],
	data() {
		return {
			visualMap:{
				position:"right",
				calculable:true,
				min:0,
				max:100,
				minText:"Low",
				maxText:"High",
				textColor:"#ffffff",
				fontSize:12,
				type:"continuous",
				colors:['#4285F4','#FFFF00', '#FFA200']
			},
			//发布参数
			publishParams: [],
			max:1000,
			min:0,
			areaConfig:{
				areaColor:"#1F75FF",
				focus:true,
				focusColor:"#43E5A7",
				fontColor:"#FFFFFF",
				borderType:"solid",
				borderWidth:1,
				borderColor:"#092477",
			},
			labelConfig:{
				fontSize:10,
				fontColor:"#FFFFFF"
			},
			shadowConfig:{
				shadowColor: '#01273F',
				shadowOffsetX: 0,
				shadowOffsetY: 10
			}
		}
	},
	created() {
		//视图映射组件
		if(this.config.styles.showVisual && !this.config.styles.visualMap){
            this.config.styles["visualMap"]=this.visualMap;
		}
		if(!this.config.styles.areaConfig){
            this.config.styles["areaConfig"]=this.areaConfig;
		}
		if(this.config.styles.showLabel && !this.config.styles.labelConfig){
            this.config.styles["labelConfig"]=this.labelConfig;
		}
		if(!this.config.styles.shadowConfig){
            this.config.styles["shadowConfig"]=this.shadowConfig;
		}
		if(!this.config.styles.fullScreenShow){
            this.config.styles["fullScreenShow"]=false;
		}
		this.initPublishParams();
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		mapI18n(name, text, key) {
			return this.$ti18(name, text, "mapLang", key);
		},
		initPublishParams() {
			this.publishParams=[{label:this.mapI18n('mapType','地图类型'), value:"mapType_"}];
			//维度
			for (let i = 0; i < this.config.dataSources.dimensions.length; i++) {
				let obj=this.config.dataSources.dimensions[i];
				this.publishParams.push({
					label:obj.fieldLabel,
					value: obj.tableName + "." + obj.fieldName
				});
			}
			//度量
			for (let i = 0; i < this.config.dataSources.measures.length; i++) {
				let obj=this.config.dataSources.measures[i];
				this.publishParams.push({
					label:obj.fieldLabel,
					value: obj.tableName + "." + obj.fieldName
				});
			}
		},
		handleChange(value, record) {
			if (value) {
				record.express_value = value.key;
			}
		},
		visualTypeChange(e){
			//连续型
			if(e.target.value=='continuous'){
                this.config.styles.visualMap["colors"]=this.visualMap.colors;
			}else {
				let colors=[
					{min:0, max:100, label:"", color:'#4285F4'},
					{min:100, max:1000, label:"", color:'#FFFF00'},
					{min:1000, max:null, label:"", color:'#FFA200'}];
                this.config.styles.visualMap["colors"]=colors;
			}
		},
		deleteColor(index){
			this.config.styles.visualMap.colors.splice(index,1);
		},
		addColor(){
			this.config.styles.visualMap.colors.push('#4285f4')
		}
	},
	watch: {}
}
</script>

<style scoped>
.map-continuous{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.map-continuous>div{
	flex: 1;
}
.map-continuous-icon{
	margin-left: 10px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}
.map-continuous-icon:hover{
	color: #4285f4;
}
.dataSources-common{
    width: 100%;
    flex: 1;
    display: flex;
    border: 1px solid #dadde0;
    border-radius: 10px;
    overflow: auto;
}
.dataSources-common-left {
    flex: 1;
    padding:10px;
    border-right: 1px solid #dadde0;
    overflow: auto;
}

.dataSources-common-right {
    flex: 1;
    overflow: auto;
    padding:10px;
}

.dataSources-common-right::-webkit-scrollbar-thumb {
    display: none;
}

.dataSources-common-right:hover::-webkit-scrollbar-thumb {
    display: block;
}
.be_colour {
	width: 50px;
}
.range {
	height: 100%;
	padding: 20px;

}
.table-operator {
	float: right;
}

.table-operator > i {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #f5f7fa;
	border: solid 1px #dadde0;
	border-left: none;
	display: block;
	float: left;
}

.table-operator > i:nth-child(1) {
	border-left: solid 1px #dadde0;
	border-radius: 5px 0px 0px 5px;
}

.table-operator > i:nth-child(4) {
	border-radius: 0px 5px 5px 0px;
}

.addColor{
	display: flex;
	align-items: center;
	width: 217px;
	text-align: center;
	border: 1px solid #4285f4;
	height: 35px;
	line-height: 35px;
	color: #4285f4;
	font-size: 14px;
	margin-bottom: 15px;
	text-align: center;
	margin-top: 10px;
	cursor: pointer;
	border-radius: 5px;
	justify-content: center;
	align-items: center;
    margin-left: 36px;
}
.addColor-icon{
	margin-right: 5px;
	font-size: 18px;
}
.chart-enlarge{
	display: flex;
}
.chart-enlarge span{
	flex: 1;
	color: rgba(0, 0, 0, 0.85);
}
</style>
